<template>
    <div :style="{ width: this.state ? 380 + 'px' : 0 }">
        <div class="note" v-if="state">
            <span class="el-icon-close" @click="close"></span>
            <el-tabs v-model="activeName" @tab-click="handleClickTab">
                <el-tab-pane label="审核" name="first">
                    <div class="auditBox">
                        <div class="auditBox-input" v-if="this.billStateName != '终止'">
                            <el-input type="textarea" :rows="2" placeholder="请输入审批意见" v-model="textarea"></el-input>
                        </div>
                        <div class="classType auditBox-input">
                            <el-button :type="buttonType(item.value)" size="mini" v-for="(item, index) in buttonData"
                                :class="classType(item.value)" :key="index" @click="auditChange(item)"><span
                                    style="margin-left: 2px;"> {{ item.value }}</span>

                            </el-button>
                        </div>
                        <div>
                            <span class="titleNote">审批记录:</span>
                            <div class="auditNote-box" ref="auditNote">
                                <div class="auditNote" v-for="(item, index) in auditNote" :key="index">
                                    <span class="auditNote-name">{{ item.auditPersonName }}</span>
                                    <span :style="{ color: item.stateName == '同意' ? 'blue' : 'red', }"
                                        class="auditNote-state">
                                        {{ item.stateName }}</span>
                                    <span class="auditNote-date">{{ item.auditdate }}</span>
                                    <span class="auditNote-message">{{ item.auditMessage }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="审批流程" name="second">
                    <div class="auditWork">
                        <div v-for="(item, index) in stepList" :key="index" style="margin-bottom: 15px;">
                            <div style="display: flex;">
                                <div class="auditWork_left">
                                    <div class="auditWork_left_image"
                                        :class="item.step < stepnum ? 'left' : item.step == stepnum ? 'on' : 'right'">
                                        <img :src="require('@/assets/audit/' + item.nodeName + '.png')" alt="" />
                                    </div>
                                    <div class="auditWork_left_line" v-if="item.step != stepList.length"></div>
                                </div>
                                <div class="auditWork_right">
                                    <div class="auditWork_right_title"
                                        :class="item.step < stepnum ? 'color1' : item.step == stepnum ? 'color2' : 'color3'">
                                        {{ item.nodeName }}
                                    </div>
                                    <div class="auditWork_right_content">
                                        <div v-for="(el, index) in item.list" :key="index"
                                            :class="el.state != 0 && item.step <= stepnum ? 'color1' : 'color3'">
                                            <img class="img" :src="require('@/assets/audit/1.png')" alt=""
                                                v-if="el.state == 1" />
                                            <img class="img" :src="require('@/assets/audit/2.png')" alt=""
                                                v-if="el.state == 2" />
                                            <span style="margin-right: 6px;">{{ el.auditPersonName }}</span>
                                            <span style="display: inline-block;">{{ el.auditdate | getDate }}</span>
                                            <span>{{ !el.state ? el.name : "" }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
        <!-- 审核-不同意 弹窗 -->
        <el-dialog title="不同意" :visible.sync="dialogVisible" width="40%" append-to-body class="dialogVisible">
            <span class="dialog-title">您的意见是"不同意",请选择后续流程</span><br />
            <div class="dialog-radio">
                <el-radio v-model="radio" label="2">继续</el-radio>
                <el-radio v-model="radio" label="3">回退</el-radio>
                <el-radio v-model="radio" label="4">终止</el-radio>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleClickAgree">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 加签 弹窗 -->
        <el-dialog title="加签" :visible.sync="addDialogVisible" width="30%" class="addDialogVisible" append-to-body>
            <h3>审核类型</h3>
            <el-divider></el-divider>
            <div style="display: flex;justify-content: flex-start; height: 50px;align-items: center;">
                <el-radio v-model="radioAddValue" label="1">审核</el-radio>
                <el-radio v-model="radioAddValue" label="2">抄送</el-radio>
            </div>
            <h3>加签人员</h3>
            <el-divider></el-divider>
            <el-input v-model="inputValueAdd" clearable style="margin: 8px 0;">
            </el-input>
            <el-button type="primary" class="el-icon-plus" plain size="mini" @click="handleClickPerson">
                选择人员</el-button>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleClickAdd">确 定</el-button>
            </span>
        </el-dialog>

        <base-quantity-person ref="baseQuantityPerson" @personConfirmClick="handleClickChoice"></base-quantity-person>
    </div>
</template>

<script>
import { getAuditBtn, getAuditNote, audit, removeAudit, auditAddFlow, getAuditList, read } from "@/api/apis/audit";
import { PersonList, PersonDetail, } from "@/api/apis/personnelSettings";
import { OrganGetBillData, GetOrganTree } from "@/api/apis/organization";
import {
    getCompanyId
} from "@/utils/auth";
import baseQuantityPerson from "@/components/base/baseQuantityPerson";


export default {
    name: "auditNote",
    components: { baseQuantityPerson },
    props: {
        billID: {
            type: String,
            required: "",
        },
        billKindID: {
            type: String,
            required: "",
        },
        billStateName: {
            type: String,
            required: "",
        },
    },
    data() {
        return {
            state: false,
            listData: [],
            buttonTypeState: "",
            dialogVisible: false,//审核不同意弹窗
            addDialogVisible: false,//加签弹窗
            textarea: "",
            buttonData: [],
            radio: "2",//不同意
            star: false,//
            cities: ['上海', '北京', '广州', '深圳'],
            checkboxGroup1: ['上海'],
            personData: [],
            radioAddValue: '2',//加签
            inputValueAdd: '',
            choiceDialog: false,
            type: false,
            personNames: [],
            personIDs: [],
            lineHeight: '',
            stepnum: "",
            auditNote: [],
            activeName: "first",
            stepList: [],
            // url: require('@/assets/audit/open.png')
        };
    },
    mounted() {
    },
    filters: {
        getDate(value) {
            if (!value) {
                return ''
            }
            return value.split('.')[0]
        },
    },
    watch: {
        personData: {
            handler(val) {
                for (let i = 0; i < val.length; i++) {
                    let arr = val[i].list || []
                    let newArr = arr.filter(item => item.isActive == true)
                    if (arr.length == newArr.length && arr.length > 0) {
                        val[i].star = true;
                    } else {
                        val[i].star = false;
                    }
                }
                // console.log(val, "watch");
            },
            deep: true,
        },
        billStateName: {
            immediate: false,
            handler(val) {
                // console.log(val, "wa")
                if (val == "审核中") {
                    this.init()
                } else {
                    this.getAuditNote();
                }
            },
            deep: true,
        },
        // billID: {
        //     handler(val) {
        //         this.changeId(val)
        //     },
        //     deep: true,
        // }
    },

    methods: {
        // img(item) {
        //     let url = require('@/assets/audit/' + item.nodeName + '.png')
        //     console.log(url, "url");
        // },
        buttonType(val) {
            if (val == "不同意") {
                return "danger"
            } else {
                return "primary"
            }
        },
        treeConvertToArr(tree) {
            let arrs = [];
            let result = [];
            arrs = arrs.concat(tree);
            while (arrs.length) {
                let first = arrs.shift(); // 弹出第一个元素
                if (first.children) {
                    //如果有children
                    arrs = arrs.concat(first.children);
                    delete first["children"];
                }
                result.push(first);
            }
            return result
        },
        classType(val) {
            if (val == "不同意") {
                return "el-icon-circle-close"
            } else if (val == "同意") {
                return "el-icon-circle-check"
            } else if (val == "加签") {
                return "el-icon-coordinate"
            } else if (val == "撤回") {
                return "el-icon-refresh-left"

            }
        },
        init() {
            this.getAuditBtn();
            this.getAuditNote();
        },
        open() {
            this.state = true
            // console.log(this.state, "open");
        },
        close() {
            this.state = false
        },
        handleClickTab(tab, event) {
            if (tab.label == "审批流程") {
                this.getAuditList();
            }
        },
        //审核不同意
        async handleClickAgree() {
            const res = await audit({
                billID: this.billID,
                billKindID: this.billKindID,
                auditState: this.radio, //审批流程控制（2不同意-继续，3不同意-退回，不同意-终止）
                agree: "0", //审批结果（1同意，0不同意）
                auditMessage: this.textarea,
            });
            if (res.success == true) {
                this.$message({
                    message: "审核成功",
                    type: 'success'
                });
            }
            this.$parent.init()
            this.state = true
            this.textarea = ''
            this.dialogVisible = false;
        },
        //加签弹窗确定
        handleClickAdd() {
            this.addDialogVisible = false;
            this.auditAddFlow()
            this.listData = []
        },
        //选中人员,关闭弹窗
        handleClickChoice(val) {
            this.listData = val
            // console.log(this.listData, "aa");
            let ids = []
            let names = []
            if (val.length > 0) {
                for (let i = 0; i < val.length; i++) {
                    ids.push(val[i].p_PersonID)
                    names.push(val[i].p_PersonName)
                }
            } else {
                // this.inputValueAdd = ''
                return
            }
            this.personIDs = ids || []
            this.personNames = names || []
            this.inputValueAdd = this.personNames.join()
        },
        //选择人员,开启弹窗
        handleClickPerson() {
            this.$refs.baseQuantityPerson.openDialog(this.listData)
        },
        choiceHandleConfirm() {
            // alert(11)
        },
        //获取审批权限按钮
        async getAuditBtn() {
            let params = {
                billID: this.billID,
                billKindID: this.billKindID,
            };

            const res = await getAuditBtn(params);
            // let arr = [1, 2, 3, 4, 5, 6, 7, 8]
            let buttonData = [];
            let newarr = [
                { label: "1", value: "暂存" },
                { label: "2", value: "提交审核" },
                { label: "3", value: "同意" },
                { label: "4", value: "不同意" },
                { label: "5", value: "已读" },
                { label: "6", value: "加签" },
                { label: "7", value: "撤回" },
                { label: "8", value: "提交到退回人" },
            ];
            let arr = res.data[0];
            arr.forEach((el) => {
                if (el == '1' || el == '2') {
                    return
                } else {
                    newarr.forEach((item) => {
                        if (el == item.label) {
                            buttonData.push(item);
                        }
                    });
                }
            });
            this.buttonData = buttonData;
            this.buttonType()

        },
        //点击审批处理
        auditChange(item) {
            if (item.value == "同意" || item.value == "不同意") {
                this.audit(item);
            } else if (item.value == "撤回") {
                this.removeAudit();
            } else if (item.value == "加签") {
                this.addDialogVisible = true;
                this.personIDs = []
                this.personNames = []
            } else if (item.value == "已读") {
                this.read()

            }
        },
        //撤回审核
        async removeAudit() {
            const res = await removeAudit({
                billID: this.billID,
                billKindID: this.billKindID,
                auditMessage: this.textarea, //审批回复
            });
            if (res.success == "true") {
                this.$message({
                    message: "撤回审核成功",
                    type: "success",
                });
            }
            this.$parent.init()
            this.init()
            this.textarea = ''
            this.state = true


        },
        //获取单据审批记录
        async getAuditNote() {
            const res = await getAuditNote({
                billID: this.billID,
            });
            this.auditNote = res.data[0];
            // this.$nextTick(() => {
            //     this.$refs.auditNote.scrollTop = this.$refs.auditNote.scrollHeight;
            // })

        },
        //已读
        async read() {
            const res = await read({
                billID: this.billID,
                auditMessage: this.textarea
            });
            if (res.code == 1) {
                this.$message({
                    message: "已读成功",
                    type: 'success'
                });
            }
            this.$parent.init()
            this.init()
            this.textarea = ''

            // this.auditNote = res.data[0];
            // this.$nextTick(() => {
            //     this.$refs.auditNote.scrollTop = this.$refs.auditNote.scrollHeight;
            // })

        },
        //加签
        async auditAddFlow() {
            const res = await auditAddFlow({
                billID: this.billID,
                auditType: this.radioAddValue, //加签节点审核类型（1、审核  2抄送）
                personIDs: this.personIDs.join(), //加签人ID集合，多个人英文逗号隔开
                personNames: this.personNames.join(), //加签人姓名集合，多个人英文逗号隔开
            });
            if (res.success == "true") {
                this.$message({
                    message: "加签成功",
                    type: 'success'
                });
            }
            this.getAuditList();
            this.inputValueAdd = ''

        },
        //审核
        async audit(item) {
            if (item.value == "同意") {
                const res = await audit({
                    billID: this.billID,
                    billKindID: this.billKindID,
                    auditState: "1", //审批流程控制（2不同意-继续，3不同意-退回，不同意-终止）
                    agree: "1", //审批结果（1同意，0不同意）
                    auditMessage: this.textarea, //审批回复
                });
                if (res.success == "true") {
                    this.$message({
                        message: "审核成功",
                        type: 'success'
                    });
                }
                this.$parent.init()
                this.textarea = ''
                this.state = true
                this.init()

            } else if (item.value == "不同意") {
                if (this.textarea == "") {
                    this.$vmNews("请输入审批意见,不能为空");
                } else {
                    this.dialogVisible = true;
                }
            }
        },
        //获取单据审批流程
        async getAuditList() {
            const res = await getAuditList({
                billID: this.billID,
            });
            this.stepnum = res.data[0];
            let stepList = res.data[1];
            stepList.forEach((el) => {
                res.data[2].forEach((item) => {
                    if (el.step == item.step) {
                        if (!el.list) {
                            el.list = [];
                        }
                        el.list.push(item);
                        el.list = Array.from(new Set(el.list));
                    }
                });
                res.data[3].forEach((item) => {
                    if (el.step == item.step) {
                        if (!el.list) {
                            el.list = [];
                        }
                        el.list.push(item);
                        el.list = Array.from(new Set(el.list));
                    }
                });
            });
            this.stepList = stepList;
            // console.log(this.stepList);
        },

        // 改变选中
        typeChange(item) {
            item.isActive = !item.isActive;
            if (item.isActive) {
                this.personIDs.push(item.p_PersonID);
                this.personNames.push(item.p_PersonName);
                // console.log(this.personIDs, "id");
            } else {
                let index = this.personIDs.findIndex(el => el == item.p_PersonID)
                this.personIDs.splice(index, 1);
                let index1 = this.personNames.findIndex(el => el == item.p_PersonName)
                this.personNames.splice(index1, 1);
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.note {
    border: 1px solid #ffffffd8;
    border-radius: 5px;
    background: #ffffff;
    height: 100%;
    padding: 0 10px;

    .el-icon-close {
        height: 24px;
        font-size: 22px;
        margin: 3px 5px;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
    }

    .auditBox {
        height: calc(100% - 300px);

        .auditBox-input {
            margin-bottom: 10px;
            width: 100%;
        }

        .titleNote {
            margin-bottom: 10px;
            font-size: 15px;
            height: 20px;
            display: inline-block;
            line-height: 20px;
        }

        .auditNote-box {
            height: calc(100vh - 420px);
            overflow-y: auto;

            .auditNote {
                display: flex;
                flex-wrap: wrap;
                place-content: space-around space-between;
                margin-bottom: 8px;
                background: rgba(192, 196, 204, 0.1);
                font-size: 13px;
                padding: 10px 15px 5px 15px;
                border-radius: 5px;
                align-content: center;
                justify-content: flex-start;
                align-items: center;

                .auditNote-name {
                    width: 44%;
                    height: 23px;
                    line-height: 23px;
                }

                .auditNote-state {
                    width: 18%;
                    height: 23px;
                    line-height: 23px;
                }

                .auditNote-date {
                    width: 38%;
                    height: 23px;
                    line-height: 23px;
                }

                .auditNote-message {
                    word-break: break-all;
                    white-space: normal;
                    padding: 3px 0;
                    line-height: 1.3;
                }
            }

        }
    }

    ::v-deep .el-tabs__item {
        width: 179px;
        text-align: center;
        font-size: 18px;
    }





    .auditWork {
        width: 100%;
        height: calc(100vh - 270px);
        overflow-y: auto;
        background: #fafafa;
        border-radius: 8px;
        padding: 25px 20px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;

        .auditWork_left {
            width: 7%;
            text-align: center;

            .auditWork_left_image {
                width: 24px;
                height: 24px;
                line-height: 24px;
                border-radius: 50%;
                text-align: center;
                z-index: 10;
            }

            .auditWork_left_line {
                background-color: #c0c4cc;
                width: 2px;
                height: 100%;
                margin: 0 auto;
            }
        }

        .auditWork_right {
            width: 93%;

            .auditWork_right_title {
                font-size: 16px;
                margin-left: 10px;
                font-weight: 600;
                font-family: PingFangSC-Semibold, PingFang SC;
            }

            .auditWork_right_content {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                width: 100%;
                align-items: center;
                padding: 5px 10px;
                font-size: 12px;

                .img {
                    margin-top: 6px;
                    margin-right: 6px;
                }
            }
        }

        .left {
            background: #dcdcdc;
        }

        .right {
            background: #333333bb;
        }

        .on {
            background: #2a6aff;
        }

        .color1 {
            width: 80%;
            line-height: 24px;
            height: 24px;
            font-family: PingFangSC;
            color: #999999;


        }

        .color2 {
            font-family: PingFangSC;
            color: #1642c3;
        }

        .color3 {
            width: 50%;
            height: 24px;
            line-height: 24px;
            font-family: PingFangSC;
            color: #333333d9;
            font-weight: 600;
        }
    }
}
</style>
<style lang="scss" scoped>
.dialogVisible {
    ::v-deep .el-dialog {
        height: 40%;
        padding: 20px;
        border-radius: 8px;
    }

    .dialog-title {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 20px;
        width: 100%;
    }

    .dialog-radio {
        margin-top: 50px;
        display: flex;
        justify-content: space-around;
        font-size: 15px;
    }

    ::v-deep .el-dialog__footer {
        position: absolute;
        right: 20px;
        bottom: 20px;
    }
}

.addDialogVisible {
    ::v-deep .el-divider--horizontal {
        margin: 5px 0;
    }
}

.choiceDialog {
    ::v-deep .el-divider--horizontal {
        margin: 5px 0;
    }

    .person {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        padding: 0 10px;
        background: #f2f2f2;
        margin-right: 10px;
        min-width: 70px;
        text-align: center;
    }

    .person:hover {
        cursor: pointer;
        background-color: #5fb878;
        color: #fff;
    }

    .active {
        background-color: #5fb878;
        color: #fff;
    }

}
</style>
